<template>
    <div class="register">
        <el-card class="box-card">
            <h2>注册</h2>
            <p>
                <el-input prefix-icon="el-icon-user" @input="checkusername" v-model="username" placeholder="请输入用户名"></el-input>
                <span :class="usernameclass">{{usernametip}}</span>
            </p>
            <p>
                <el-input prefix-icon="el-icon-unlock" @input="checkuserpwd" placeholder="请输入密码" v-model="userpwd" show-password></el-input>
                <span :class="userpwdclass">{{userpwdtip}}</span>
            </p>
            <p>
                <el-input prefix-icon="el-icon-unlock" placeholder="请确认密码" v-model="confirmPwd" show-password></el-input>
            </p>
            <p>
                <el-input prefix-icon="el-icon-phone-outline" @input="checkusertel" v-model="usertel" placeholder="请输入手机号" type="text"></el-input>
                <span :class="usertelclass">{{userteltip}}</span>
            </p>
            <p>
                <el-input prefix-icon="el-icon-message" @input="checkemail" v-model="email" placeholder="请输入邮箱" type="text"></el-input>
                <span :class="emailclass">{{emailtip}}</span>
            </p>
            <p>
                <el-button type="primary" @click="userRegister">注册</el-button>
            </p>
            <p class="loginAcc">
                已有账号？<router-link to="/login">登录</router-link>
            </p>
        </el-card>
    </div>
</template>

<script>
export default {
    name:"Register",
    data(){
        return{
            // userInfo: {
            // userName: '',
            // pwd: '',
            // confirmPwd:'',
            // phone:'',
            // email:''
            // },
            
            confirmPwd:'',

            username:'',
            usernametip: "5~10个字符，可使用字母、数字，需要以字母开头",
            usernamereg: /^[a-z][0-9a-z]{4,9}$/i,
            usernameclass: "default",

            userpwd:'',
            userpwdtip: "6~12个字符，区分大小写",
            userpwdreg: /^[0-9a-z]{6,12}$/i,
            userpwdclass: "default",

            usertel:'',
            userteltip: "请输入常用的11位手机号",
            usertelreg: /^1[3-9][0-9]{9}$/i,
            usertelclass: "default",

            email:'',
            emailtip: "请输入QQ邮箱",
            emailreg: /[1-9]\d{7,10}@qq\.com/i,
            emailclass: "default",

        }
    },
    methods:{
      userRegister() {
                if(this.username.length==0){
                this.$message({
                    duration:1000,
                    message: '请输入用户名',
                    type: 'error'
                });
            }else if(this.userpwd.length==0){
                this.$message({
                    duration:1000,
                    message: '请输入密码',
                    type: 'error'
                });
            }else if(this.confirmPwd.length==0){
                this.$message({
                    duration:1000,
                    message: '请确认密码',
                    type: 'error'
                });
            }
            else if(this.usertel.length==0){
                this.$message({
                    duration:1000,
                    message: '请输入手机号',
                    type: 'error'
                });
            }
            else if(this.email.length==0){
                this.$message({
                    duration:1000,
                    message: '请输入邮箱',
                    type: 'error'
                });
            }
            else{
                if(this.usernameclass == "success" &&
            this.userpwdclass == "success" &&
            this.usertelclass == "success"){
                    if(this.confirmPwd == this.userpwd){
                        this.$axios.post(this.$api.register.Register,{
                            userName : this.username,
                            password : this.confirmPwd,
                            phone : this.usertel,
                            email : this.email
                        }).then((res)=>{
                            let result = res.data
                            if(result.code==200){
                                this.$message({
                                    duration:1500,
                                    message: result.msg,
                                    type: 'success'
                                });
                                this.$router.push('login')
                            }else{
                                this.$message({
                                    duration:1500,
                                    message: result.msg,
                                    type: 'error'
                                });
                            }
                        
                        }).catch((err)=>{
                            console.log(err);
                            this.$message({
                                duration:1500,
                                message: '请求出错',
                                type: 'error'
                            });
                        })
                    }else{
                        this.$message({
                                duration:1500,
                                message: '两次密码不匹配',
                                type: 'error'
                        });
                    }
                }else{
                    this.$message({
                                duration:1500,
                                message: '请检查输入是否正确',
                                type: 'error'
                        });
                }
            }
      },
       checkusername() {
          //检查用户名
          //正则表达式的验证
          if (this.usernamereg.test(this.username)) {
            this.usernametip = "该用户名可以注册";
            this.usernameclass = "success";
          } else {
            this.usernametip =
              "用户名只能数字字母组成并且不能以数字开头 长度6到10位";
            this.usernameclass = "error"; 
          }
      },
        checkusertel() {
          //检查手机号
          if (this.usertelreg.test(this.usertel)) {
            this.userteltip = "";
            this.usertelclass = "success";
          } else {
            this.userteltip = "请输入常用的11位手机号";
            this.usertelclass = "error";
          }
        },

        checkuserpwd() {
          //验证密码
          //第一步  验证格式是否合法
          if (this.userpwdreg.test(this.userpwd)) {
            //  this.userpwdtip="√";
            //  this.userpwdclass="success";
            //这里都是格式合法的
            let numCount = /[0-9]/.test(this.userpwd); //测试出里面有数字结果就是true
            let lowerCount = /[a-z]/.test(this.userpwd); //测试是否有小写
            let uppwerCount = /[A-Z]/.test(this.userpwd); //测试是否有大写

            switch (
              numCount +
              lowerCount +
              uppwerCount //求三个的和
            ) {
              case 1:
                this.userpwdtip = `弱`;
                break;
              case 2:
                this.userpwdtip = `中`;
                break;
              case 3:
                this.userpwdtip = `强`;
                break;
            }
            this.userpwdclass = "success";
          } else {
            this.userpwdtip = "密码只能数字字母组成长度6到12位";
            this.userpwdclass = "error";
          }
        },
        checkemail() {
            if(this.emailreg.test(this.email)){
                this.emailtip = '';
                this.emailclass = 'success';
            }else{
                this.emailtip = '请输入QQ邮箱';
                 this.emailclass = 'error';
            }
        }
    }
}

</script>

<style scoped>
    .success {
        font-size: 12px;
        display: block;
        color: green !important;
        text-align: left;
    }
    .default{
        font-size: 12px;
        display: block;
        color: rgb(105, 105, 105) !important;
        text-align: left;
    }
    .error {
        font-size: 12px;
        display: block;
        color: red;
        text-align: left;
    }
    .loginAcc{
        margin-top: 8px;
        font-size: 13px;
    }
span{
    margin-right: 10px;
}
h2{
    font-size: 30px;
    margin: 15px 0;
}
.leftRedio{
    text-align: left;
}
 .register{
    padding-top: 100px;
     box-sizing: border-box;
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-image: linear-gradient(
    45deg
    , rgba(194, 233, 221, 0.5) 1%, rgba(104, 119, 132, 0.5) 100%), linear-gradient(
    -45deg
    , #494d71 0%, rgba(217, 230, 185, 0.5) 80%);

 }
    .el-input {
        margin: 12px 0;
    }
    .el-button{
        margin-top: 15px;
        width: 100% !important;
    }

  .box-card {
     width: 450px;
     /* height: 400px; */
     margin: 0 auto;
  }
  .el-button{
      width: 80px;
      height: 45px;
  }
</style>